<!-- pages/[sessionId].vue -->
<template>
	<div ref="chatContainer" class="chat-container">
		<!-- 顶部 -->
		<div class="chat-header row-ac">
			<div style="margin-left: 1rem;">
				<i class="iconfont icon-back2-01"></i>
				<span class="font-s-15">{{ languageType === 'English' ? 'Back' : 'Geri' }}</span>
			</div>
		</div>

		<div class="w-100" style="height: 60px;"></div>

		<!-- 消息展示组件 -->
		<ChatBoxVisitor :sessionId="sessionId" />

		<div class="w-100" style="height: 75px;"></div>

		<!-- 输入栏 -->
		<div ref="inputBar" class="input-bar row-ac">
			<textarea ref="textareaRef" v-model="messageText" placeholder="Type your message..." @input="autoResize"
				@keyup.enter="sendTextMessageEnter" @focus="onInputFocus"></textarea>
			<button class="btn-send" @click="sendTextMessage">
				{{ languageType === 'English' ? 'Send' : 'Gönder' }}
			</button>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { useRoute } from 'vue-router'
	import { useFetchApi } from '@/composables/useFetchApi'
	import ChatBoxVisitor from '@/components/ChatBoxVisitor.vue'

	const { post } = useFetchApi()
	const route = useRoute()

	const sessionId = ref('')
	const languageType = ref('English')
	const messageText = ref('')
	const textareaRef = ref<HTMLTextAreaElement | null>(null)
	const autoScroll = ref(true)

	// ---------- 输入栏逻辑 ----------
	const autoResize = () => {
		if (!textareaRef.value) return
		const el = textareaRef.value
		el.style.height = 'auto'
		el.style.height = Math.min(el.scrollHeight, 38) + 'px'
	}

	const resetTextarea = () => {
		if (textareaRef.value) textareaRef.value.style.height = '22px'
	}

	const onInputFocus = () => {
		setTimeout(() => { }, 300)
	}

	const sendTextMessage = async () => {
		if (!messageText.value.trim()) return
		try {
			await post('/api/chat/create_messages', {
				session_id: sessionId.value,
				content: messageText.value,
				content_img: '',
			})
		} catch (err) {
			console.error('发送失败:', err)
		}
		messageText.value = ''
		resetTextarea()
	}

	const sendTextMessageEnter = (e : KeyboardEvent) => {
		if (e.shiftKey) return
		e.preventDefault()
		sendTextMessage()
	}

	onMounted(() => {
		sessionId.value = route.params.sessionId as string
		const savedLang = localStorage.getItem('languageType')
		if (savedLang) languageType.value = savedLang
	})
</script>

<style scoped>
	.chat-container {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #f5f5f5;
		overflow: hidden;
	}

	.chat-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		color: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
		z-index: 10;
		background: linear-gradient(135deg, #030d26 0%, #1a2a4a 100%);
	}

	.input-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 75px;
		background: #fff;
		border-top: 1px solid #eee;
		box-sizing: border-box;
	}

	textarea {
		flex: 1;
		height: 22px;
		padding: 0.5rem;
		border-radius: 4px;
		border: 1px solid #ccc;
		resize: none;
		outline: none;
		line-height: 1.5;
		font-size: 16px;
		color: #333;
		margin-left: 1rem;
	}

	.btn-send {
		margin-left: 0.5rem;
		margin-right: 1rem;
		padding: 0.6rem 1rem;
		border-radius: 4px;
		border: none;
		color: #fff;
		font-size: 16px;
		background: rgba(0, 0, 0, 0.9);
	}
</style>